import { useState, useEffect } from 'react';
import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons';
import { Checkbox } from 'antd';
import styles from './index.less';

const Tree = props => {
  const { data, getSelectData = null, eidtData = [], visible } = props;
  const [treeData, setTreeData] = useState([]);

  const setTree = newList => {
    newList.map(item => {
      if (eidtData.indexOf(item.key) > -1) {
        item.checked = true;
      } else {
        item.checked = false;
      }
      if (item.children?.length) {
        setTree(item.children);
      }
      return '';
    });
    return newList;
  };

  useEffect(() => {
    const newList = JSON.parse(JSON.stringify(data));
    setTreeData(setTree(newList));
  }, [eidtData]);

  const clickDown = citem => {
    const newList = JSON.parse(JSON.stringify(treeData));
    const setList = list => {
      list.map(item => {
        if (citem.key === item.key && !item.down) {
          item.down = true;
          if (item.children && item.children.length) {
            setList(item.children);
          }
        } else if (citem.key === item.key && item.down) {
          item.down = false;
        } else {
          if (item.children && item.children.length) {
            setList(item.children);
          }
        }
      });
    };
    setList(newList);
    setTreeData(newList);
  };

  const setChange = (arr, e, citem) => {
    // console.log('arr=', arr, 'citem=', citem);
    arr &&
      arr.length &&
      arr.map(item => {
        if (citem.key === item.key || citem === 'children') {
          item.checked = e.target.checked;
          if (item.children && item.children.length) {
            setChange(item.children, e, 'children');
          }
        } else {
          setChange(item.children, e, citem);
        }
      });
    return arr;
  };

  const onChangeMenu = (e, citem) => {
    const newList = JSON.parse(JSON.stringify(treeData));
    const list = setChange(newList, e, citem);
    setTreeData(list);

    const selectData = [];
    const selectDataLoop = arr => {
      arr.map(item => {
        if (item.checked === true) {
          selectData.push(item.key);
        }
        if (item.children?.length) {
          selectDataLoop(item.children);
        }
      });
    };
    selectDataLoop(list);
    getSelectData(selectData);
  };

  const setNewTree = t => {
    return (
      t &&
      t.length &&
      t.map(item => {
        return (
          <div key={item.key}>
            {item.children && item.children.length && (
              <span onClick={() => clickDown(item)} className={styles.downIcon}>
                {item.down === true ? <CaretRightOutlined /> : <CaretDownOutlined />}
              </span>
            )}
            <Checkbox
              key={item.key}
              checked={item.checked}
              parentId={item.parentId}
              onChange={e => onChangeMenu(e, item)}
            >
              {item.title}
            </Checkbox>
            <div style={{ paddingLeft: 40, display: `${item.down === true ? 'block' : 'none'}` }}>
              {item.children?.length && setNewTree(item.children)}
            </div>
          </div>
        );
      })
    );
  };
  return (
    <>{treeData && treeData.length && visible === true && <div>{setNewTree(treeData)}</div>}</>
  );
};
export default Tree;
